<!-- eslint-disable no-use-before-define -->
<template>
  <div class="physicalShop">
    <u-navbar back-text="" :title="pageTitle" :title-bold="true" :is-back="!enterByStoreQrcode"
      v-if="!isWeChatOfficial && !isApp" color="#333"></u-navbar>
    <page-skeleton :loading="loadingSkeleton" :type="2"></page-skeleton>
    <u-swiper :height="750" :list="bannerList" mode="number" indicator-pos="bottomRight"></u-swiper>
    <view class="shop">
      <view class="contentBox">
        <view class="imgCover">
          <u-image class="img" border-radius="10rpx" :src="getImgFullPath(shop.avatar)" height="160rpx" :lazy-load="true"
            mode="scaleToFill" />
          <!-- <text class="type">{{ shop.type }}</text> -->
        </view>
        <view class="content">
          <text class="name">{{ shop.name }}</text>
          <text class="remark">{{ shop.remark }}</text>
          <view class="addr">
            <view class="msg">
              <u-icon name="map-fill" class="icon"></u-icon>
              <text>{{ shop.addr }}</text>
            </view>
            <text class="distance">{{ shop.distance }}</text>
          </view>
        </view>
      </view>
      <view class="actionBox">
        <view>
          <text class="rule" v-if="shop.shopMoneyRule">{{
            shop.shopMoneyRule.userMoneyRuleName
          }}</text>
        </view>
        <view class="actions">
          <u-button type="primary" ripple size="mini" shape="circle" @click="handleMapLocation(shop)">导航</u-button>
          <u-button type="primary" ripple size="mini" shape="circle" v-if="false">VIP充值</u-button>
          <u-button type="primary" ripple size="mini" shape="circle" v-if="shop.supportDynamicPrice"
            @click="handleCheck(shop)">付款</u-button>
          <u-button type="primary" ripple size="mini" shape="circle" @click="makePhoneCall(shop.address.phone)"><text
              class="iconfont hy-icon-dianhua"></text> 电话咨询</u-button>
        </view>
      </view>
    </view>
    <view class="tabs">
      <u-tabs :list="tabs" v-model="currentTab" @change="tabsChange" :is-scroll="true"></u-tabs>
    </view>
    <view class="swiper">
      <view class="swiper-item" v-for="(item, index) in productList" :key="index">
        <view class="scorll-view" of v-if="index === currentTab" scroll-y @scrolltolower="onreachBottom">
          <view class="container">
            <view class="itemWrap" v-for="product in item.list" :key="item.tab">
              <view class="contentBox">
                <view class="imgCover" @click="toProductDetail(product.productId)">
                  <u-image class="img" border-radius="0" :src="getImgFullPath(product.image)" :height="imgHeight"
                    :lazy-load="true" mode="aspectFill" />
                </view>
                
                <view class="content">
                  
                  <view class="name">{{ product.name }}</view>
                  <view class="countBox">
                    <view>销量：{{ product.saleCount>0 ? product.saleCount : 0 }}</view>
                    <view>库存：{{ product.count }}</view>
                  </view>
                  <view class="numberBox">
                    <view class="money">
                      <view class="origin" v-if="product.originalMoney">￥{{ product.originalMoney }}</view>
                      <view>￥{{ isMember ? product.memberMoney ? product.memberMoney : product.money : product.money }}
                      </view>
                    </view>
                    
                    <view class="steper" v-if="tableNumber">
                      <view @click="minus($event, '.numberBox' + currentTab + index, product)"
                        v-show="product.cart_count && !(product?.shopProductSkus?.length > 1)" class="num-btn">
                        －
                      </view>
                      <view class="num" v-show="product.cart_count"> {{ product.cart_count || 0 }}</view>

                      <view @click="plus($event, '.numberBox' + currentTab + index, product)"
                        :class="['numberBox' + currentTab + index]" class="num-btn">
                        ＋
                      </view>
                    </view>

                    <!-- <u-number-box :ref="'numberBox' + currentTab + index" disabled-input
                      style="transform: scale(0.9) translateX(18rpx);" v-show="product.count && tableNumber" :size="30"
                      :input-width="50" :input-height="50" v-model="product.count"
                      @plus="plus($event, 'numberBox' + currentTab + index)"></u-number-box> -->
                  </view>
                 
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>
    <u-back-top :scroll-top="scrollTop" :bottom="380" :top="2000"></u-back-top>

    <!-- #ifdef H5 -->
    <hyTabBar v-if="enterByStoreQrcode" v-model="currentTabbar" :list="tabList" :mid-button="false" :icon-size="34"
      active-color="#5098ff" @change="handleTabBarChange"></hyTabBar>
    <!-- #endif -->
    <c_cart ref="cartRef" :list="cartList" :tabelNumber="tableNumber" :is-member="isMember" :isApp="isApp"
      @change="cartChange" @clear="getCartList" />
    <c_sku_selector ref="skuSelector" :is-member="isMember" :list="productList[0]?.list" @change="selectorChange" />
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import { onLoad, onShow, onReady, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia'
import { useConfigStore, useUserStore } from '@/store'
import { baseApi, productApi, userApi } from '@/api';
import {
  getImgFullPath,
  getDistance,
  handleMapLocation,
  makePhoneCall,
} from '@/utils/index'
import pageSkeleton from '@/components/hy-page-skeleton/index.vue'
import hyTabBar from '@/components/hy-tabbar/index.vue'
import c_cart from './c_cart.vue'
import c_sku_selector from './c_sku_selector.vue'
import { browserVersion, isWeChat, route } from '@/utils/common'


const configStore = useConfigStore()
const userStore = useUserStore()
const { hasLogin, userInfo } = storeToRefs(userStore)
const { enterByStoreQrcode } = storeToRefs(configStore)
const loadingSkeleton = ref(false)
const bannerList = ref([])
const shop = ref({})
const shopId = ref()
const currentLocation = ref()
const productList = ref<object[]>([])
const tabs = ref<any>([])
const currentTab = ref(0)
const scrollTop = ref(0)
const tabList = ref([
  {
    iconPath: '/static/ic_bar_main_pg.png',
    selectedIconPath: '/static/ic_bar_main_page_checked.png',
    text: '首页',
    hy_path: '/pages/physicalShop/index'
  },
  {
    iconPath: '/static/ic_bar_mine.png',
    selectedIconPath: '/static/ic_bar_mine_checked.png',
    hy_pagePath: '/pages/my/index',
    // hy_pagePath: '/pages/mine/index',
    text: '我的'
  }
])
const currentTabbar = ref(0)
const pageTitle = ref('')
const isWeChatOfficial = ref(true)
const tabsStyleTop = ref('')
// #ifdef MP-WEIXIN
isWeChatOfficial.value = false
// #endif
const shareCode = ref('')

function getLocation() {
  // 获取定位信息
  uni.getLocation({
    type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
    // 用户允许获取定位
    success(res) {
      if (res.errMsg == 'getLocation:ok') {
        const { latitude, longitude } = res
        currentLocation.value = {
          latitude,
          longitude
        }
        if (!shop.value.latitude) return
        getDistance(
          latitude,
          longitude,
          shop.value.latitude,
          shop.value.longitude
        ).then((res) => {
          const { distance_str } = res
          shop.value.distance = distance_str
        })
      }
    },
    // 用户拒绝获取定位后 再次点击触发
    fail(res) {
      console.log(res)
      if (res.errMsg == 'getLocation:fail auth deny') {
        uni.showModal({
          content: '检测到您没打开获取信息功能权限，是否去设置打开？',
          confirmText: '确认',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              uni.openSetting({
                success: (res) => {
                  console.log('确定')
                }
              })
            } else {
              console.log('取消')
              return false
            }
          }
        })
      }
    }
  })
}
// 付款
// eslint-disable-next-line no-shadow
function handleCheck(shop: { name: any; id: any }) {
  if (userStore.checkLoginState()) {
    const { name, id } = shop
    uni.navigateTo({
      url: `/pages/physicalShopCheck/index?name=${name}&shopId=${id}`
    })
  }
}
async function getShopInfo() {
  try {
    const { data } = await productApi.getShopInfo({
      id: shopId.value,
      detail: true
    })
    const { bannerResources, avatar, name } = data
    // 设置页面title
    setTitle(name)
    shop.value = data
    if (bannerResources && bannerResources.length > 0) {
      bannerList.value = bannerResources.map(
        (item: { image: string; resourceUrl: string }) => {
          // eslint-disable-next-line no-param-reassign
          item.image = getImgFullPath(item.resourceUrl)
          return item
        }
      )
    } else {
      const image = getImgFullPath(avatar)
      bannerList.value.push(image)
    }

    const { provinceName, cityName, districtName, street, other } =
      shop.value.address
    shop.value.addr = provinceName + cityName + districtName + street + other
    shop.value.shopMoneyRule = shop.value.shopMoneyRules
      ? shop.value.shopMoneyRules.find(
        (item: { selected: any }) => item.selected
      )
      : {}
    if (currentLocation.value) {
      const { latitude, longitude } = currentLocation.value
      getDistance(
        latitude,
        longitude,
        shop.value.latitude,
        shop.value.longitude
      ).then((res) => {
        const { distance_str } = res
        shop.value.distance = distance_str
      })
    }
  } catch (err) {
    console.log(err)
  }
}
function initData() {
  return tabs.value.map((item) => {
    return {
      tab: item,
      productId:item.id,
      list: [],
      loading: true,
      finished: false,
      pageIndex: 1,
      pageSize: 20
    }
  })
}

// 获取tab列表
async function getTabs() {
  const { data } = await baseApi.getCategoryList({
    detail: true,
    // needShowAll: true,
    noPaging: true,
    productShopId: shopId.value
  })
  tabs.value = removeParent(data)
  tabs.value.unshift({
    name: '全部',
    id: ''
  })
  console.log('tabs', initData());
  
  productList.value = initData()
}
function removeParent(arr: { parentId: any; id: any }[]) {
  console.log('分类',arr);
  
  // let newArr = arr.filter(item => item.parentId != 0)
  // return newArr
  let newArr = uni.$u.deepClone(arr)
  arr.forEach((item: { id: any; }, index) => {
    const isPar = arr.some((i: { parentId: any; }) => i.parentId === item.id)
    if (isPar) {
      newArr.splice(index, 1)
    }
  })
  return newArr
}

// 加载商品列表
// async function getShopProduct() {
//   const item = productList.value[currentTab.value]
//   const item_all = productList.value[0]
//   const tab = tabs.value[currentTab.value]
//   if (!item) return
//   const { finished, pageSize, pageIndex } = item_all
//   if (finished) return
//   const { data } = await productApi.getShopProductList({
//     pageIndex,
//     pageSize,
//     detail: 'true',
//     categoryId: tab.id,
//     shopType: 3,
//     shopId: shopId.value,
//     dynamicPrice: false
//   })
//   const { records, current, pages } = data
//   records.forEach((item: { shopProductSkus: any;count: number;saleCount: number; }) => {
//     let _count: number = 0,_saleCount: number = 0;
//     if (item.shopProductSkus){
//       item.count = item.shopProductSkus.forEach((p: { productSku:any;saleCount: number; }) => {
//           _count += p.productSku.count ?? 0;
//           _saleCount += p.saleCount ?? 0;
//       });
//       item.saleCount = _saleCount;
//       item.count = _count;
//     }
//   });
//   console.log(records)
//   item_all.list.push(...records)
//   item.list = tab.id ? getTabProdList(item_all.list, tab.id) : item_all.list
//   if (current < pages) {
//     item_all.pageIndex++
//   } else {
//     item_all.finished = true
//   }
// }
 const getShopProduct = async( ) =>{
    const item:any = productList.value[currentTab.value]
    if (!item) return
    const { finished,productId, pageSize, pageIndex } = item
    if (finished) return
  const { data } = await productApi.getShopProductList({
    pageIndex,
    pageSize,
    detail: 'true',
    categoryId: productId,
    shopType: 3,
    shopId: shopId.value,
    dynamicPrice: false
  })
  const { records, current, pages } = data
console.log(data,'分类数据');
  records.forEach((item: { shopProductSkus: any;count: number;saleCount: number; }) => {
    let _count: number = 0,_saleCount: number = 0;
    if (item.shopProductSkus){
      item.count = item.shopProductSkus.forEach((p: { productSku:any;saleCount: number; }) => {
          _count += p.productSku.count ?? 0;
          _saleCount += p.saleCount ?? 0;
      });
      item.saleCount = _saleCount;
      item.count = _count;
    }
  });
  console.log(records)
  item.list.push(...records)
  // item.list = tab.id ? getTabProdList(item_all.list, tab.id) : item_all.list
  if (current < pages) {
    item.pageIndex++
  } else {
    item.finished = true
  }

}
// 用categoryid过滤商品列表
function getTabProdList(list: any[], categoryId: any) {
  if (!list.length) return []
  console.log(list,categoryId,'东西');
  
  return list.filter((item: { categoryId: any; }) => item.categoryId === categoryId)
}

// tab切换
function tabsChange(index: any) {
  
  currentTab.value = index
  console.log('tab切换', productList.value[currentTab.value]);
  const item = productList.value[currentTab.value]
  // if (!item.list.length) {
    getShopProduct()
  //   // item.list = getTabProdList(productList.value[0].list, tabs.value[index].id)
  // }
  let scrollTop = 400
  // #ifdef H5
  scrollTop -= configStore.navBarHeight - 50
  // #endif
  uni.pageScrollTo({
    scrollTop,
    duration: 300
  })
}
function toProductDetail(id: any) {
  console.log('点击了');
  
  if (userStore.checkLoginState()) {
    if (!id) return
    let url = `/pages/productDetail/index`
    if (shareCode.value) {
      url = `/pages/productDetail/index`
    }
    if (isRestaurant.value) {
      uni.$once('cartChange', (onlyShow: boolean) => {
        !onlyShow && getCartList()
        cartRef.value.showList()
      })
    }
    route({
      url: url,
      params: {
        shopId: shopId.value,
        productId: id,
        tableNumber: tableNumber.value,
        isMember: isMember.value ? 1 : 0,
      }
    })
  }
}


// H5页面动态设置title
function setTitle(title = '') {
  pageTitle.value = title
  // #ifdef H5
  document.title = title
  const i = document.createElement('iframe')
  i.src = '/favicon.ico'
  i.style.display = 'none'
  i.onload = () => {
    setTimeout(() => {
      i.remove()
    }, 9)
  }
  document.body.appendChild(i)
  // #endif
}
// 切换tab
function handleTabBarChange(index: any) {
  if (index === 0) return
  const toPage = tabList.value[index]
  if (toPage.hy_pagePath) {
    uni.switchTab({
      url: toPage.hy_pagePath
    })
  } else {
    uni.redirectTo({
      url: toPage.hy_path
    })
  }
}
const imgHeight = ref('240rpx')
// -----------------扫码点餐------------------
const cartList = ref([])
const isMember = ref(false)
const tableNumber = ref('')
const isRestaurant = computed(() => {
  return tableNumber.value && Number(tableNumber.value) > 0
})
const cartRef = ref()
const skuSelector = ref()

async function plus(event: any, ref: any, product: any, skuId?: number) {
  const res = await addToCart(product, skuId)
  if (res) {
    cartRef.value.increase(event, ref)
    getCartList()
  }
}
async function minus(event: any, ref: any, product: any, skuId?: number) {
  if (product.cart_count <= 0) return
  const res = await updateCartItem(product, skuId)
  if (res) {
    getCartList()
    product.cart_count -= 1
  }
}

// 加入点餐购物车
async function addToCart(product: any, skuId?: number) {
  if (!userStore.checkLoginState()) return
  const { shopProductSkus } = product
  if (!shopProductSkus.length) return
  let sku
  if (shopProductSkus.length === 1) {
    sku = shopProductSkus[0]
  } else {
    sku = shopProductSkus.find((item: any) => item.id === skuId)
    if (!skuId) {
      skuSelector.value.showSkus(product.productId)
    }
  }
  if (!sku) return
  const res = await productApi.productCartAdd({
    userId: userInfo.value.id,
    shopId: shopId.value,
    shopProductSkuId: sku.id,
    money: isMember.value ? sku.memberMoney ? sku.memberMoney : sku.money : sku.money,
    count: 1
  })
  return res
}
// 更新购物车商品
async function updateCartItem(product: any, skuId?: number, type = 'minus') {
  const { shopProductSkus } = product
  if (!shopProductSkus.length) return
  let sku: { id: any; }
  if (shopProductSkus.length === 1) {
    sku = shopProductSkus[0]
  } else {
    sku = product.shopProductSkus.find((item: any) => item.id === skuId)
    if (!skuId) {
      skuSelector.value.show(product.productId)
    }
  }
  if (!sku) return
  const cartItem = cartList.value.find((item: any) => item.shopProductSkuId === sku.id) as any
  if (!cartItem) return
  let count = 0
  if (type === 'plus') {
    count = cartItem.count + 1
  } else {
    count = cartItem.count - 1
  }
  if (count <= 0) {
    const res = await removeCartItem(cartItem.id)
    return res
  }
  const res = await productApi.productCartUpdate({
    id: cartItem?.id,
    count
  })
  return res
}
// 移除购物车
async function removeCartItem(cartId: any) {
  return await productApi.productCartDelete({
    id: cartId
  })
}

async function getCartList() {
  const { data } = await productApi.productCartList({
    userId: userInfo.value.id,
    detail: true,
    shopId: shopId.value,
    noPaging: true
  })
  cartList.value = data
  productList.value[0].list = addCountToProductList(productList.value[0].list, data)
}

// 获取店铺会员信息
async function getShopMember() {
  const { data } = await userApi.getShopMember({
    shopId: shopId.value
  })
  isMember.value = data
}

// 遍历购物车，为商品列表添加数量
function addCountToProductList(list: any[], cartList: any[]) {
  const newList = list.map((item: any) => {
    item.cart_count = 0
    item.shopProductSkus.forEach((e: { cart_count: any; id: number }) => {
      const cartSkuItem = cartList.find((cart: any) => cart.shopProductSkuId === e.id)
      if (cartSkuItem) {
        e.cart_count = cartSkuItem.count
        item.cart_count += cartSkuItem.count
      } else {
        e.cart_count = 0
      }
    });
    return item
  })
  return newList
}
// 选中商品规格
const selectorChange = (event: any, ref: any, data: { product: any; name: string; skuId: number }) => {
  const { name, product, skuId } = data
  if (name === 'plus') {
    plus(event, ref, product, skuId)
  } else if (name === 'minus') {
    minus(event, ref, product, skuId)
  }
}

// 购物车数量变化（购物车组件）
const cartChange = async (item: { name: any; id: any; count: any; }) => {
  const { name, id, count } = item
  if (count <= 0) {
    const { code } = await removeCartItem(id)
    if (code === 200) {
      getCartList()
    }
  } else {
    const res = await productApi.productCartUpdate({
      id,
      count
    })
    if (res) {
      getCartList()
    }
  }
}
// -----------------扫码点餐 END------------------

const isApp = ref(false)
onLoad(async (option) => {
  console.log('onLoad', option)
  if (option?.qrcode) {
    configStore.setEnterType('storeQrcode')
  }
  shopId.value = option.shopId
  loadingSkeleton.value = true
  getLocation()
  await getShopInfo()
  await getTabs()
  setTimeout(() => {
    loadingSkeleton.value = false
  }, 100)
  await getShopProduct()
  if (option?.from && option.from.toLowerCase() === 'app') {
    isApp.value = true
  }
  if (isApp.value) {
    // #ifdef H5
    console.log('前端注册回调时机==>', new Date())
    window.JSBridge.registerEvent('HYUserEvent', async () => {
      if (option?.tableNumber) {
        tableNumber.value = option.tableNumber
        getCartList()
        getShopMember()
      }
    })
    // #endif
  } else {
    if (option?.tableNumber) {
      tableNumber.value = option.tableNumber
      getCartList()
      getShopMember()
    }
  }
  // #ifdef H5
  isWeChatOfficial.value = isWeChat()
  tabsStyleTop.value = (isWeChatOfficial.value || isApp.value) ? '-1px' : '44px'
  uni.getSystemInfo({
    success: (res) => {
      const { windowWidth } = res
      imgHeight.value = `${windowWidth / 1.2}rpx`
    }
  })
  if (option?.qrcode) {
    configStore.setEnterType('storeQrcode')
    const pages = getCurrentPages()
    uni.setStorageSync('shopFullPath', pages[pages.length - 1].$page.fullPath)
  }
  if (option?.shareCode) {
    shareCode.value = option?.shareCode
    uni.setStorageSync('shareCode', option?.shareCode)
  }
  // #endif

})
onShow(async () => {
  if (hasLogin.value && tableNumber.value) {
    getCartList()
  }
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
// scroll-view到底部加载更多
function onreachBottom() {
  console.log('bottom')
  getShopProduct()
}
onReachBottom(() => {
  onreachBottom()
})
onPullDownRefresh(() => {
  getShopProduct()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>


<style lang="scss" scoped>
@import '@/styles/helper.scss';

.physicalShop {
  padding-bottom: 200rpx;
}

.shop {
  border-radius: $section-raduis;
  background: $uni-bg-color-white;
  margin-bottom: $uni-spacing-col-lg;
  padding: $uni-spacing-row-lg;

  .contentBox {
    display: flex;

    .imgCover {
      position: relative;
      width: 160rpx;
      flex-shrink: 0;
      margin-right: 20rpx;

      .img {
        width: 100%;
        height: 200rpx;
        border-radius: $section-raduis;
      }
    }

    .content {
      .name {
        font-size: 32rpx;
        @include ellipsis(2);
      }

      .remark {
        @include ellipsis(2);
        color: $uni-text-color-light;
        font-size: 20rpx;
        margin-top: 10rpx;
      }

      .addr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 20rpx;
        color: $uni-text-color-light;
        gap: 10rpx;
        margin-top: 30rpx;

        .msg {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .icon {
            font-size: 26rpx;
            color: #333;
            margin-right: 5rpx;
          }
        }

        .distance {
          flex-shrink: 0;
          margin-left: 10rpx;
        }
      }
    }

  }

  .actionBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;

    .rule {
      color: $uni-text-color-light;
      font-size: 20rpx;
    }

    .actions {
      display: flex;
      justify-content: center;
      gap: 18rpx;

      :deep(.u-btn--primary) {
        background: $bg-primary;
      }
    }
  }
}

.tabs {
  position: sticky;
  top: 0;
  // #ifdef H5
  top: calc(v-bind(tabsStyleTop) + env(safe-area-inset-top));
  // #endif
  background: hsl(0, 0%, 100%);
  z-index: 2;
}

.swiper {
  flex: 1;
  padding: $uni-spacing-row-base * 2;
  min-height: calc(100vh - 140rpx);

  .scorll-view {
    width: 100%;
    // height: calc(100vh - 140rpx);
  }

  .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .itemWrap {
    width: calc((100% - 30rpx) / 2);
    border-radius: $section-raduis;
    background: $uni-bg-color-white;
    margin-bottom: $uni-spacing-col-lg;
    overflow: hidden;

    .contentBox {
      .imgCover {
        position: relative;
        width: 100%;
        flex-shrink: 0;
        margin-right: 20rpx;

        .img {
          width: 100%;
          // height: 200rpx;
          border-radius: $section-raduis;
        }
      }

      .content {
        padding: 20rpx;

        .name {
          @include ellipsis(2);
          font-size: 28rpx;
        }
        .countBox {
          display: flex;
          font-size: 24rpx;
          text-align: left;
          justify-content: space-between;
          color: #a1a1a1;
          margin: 10rpx 0;
        }
        .money {
          color: red;
          font-size: 30rpx;

          // font-weight: bold;
          .origin {
            font-size: 24rpx;
            color: #666;
            text-decoration: line-through;
          }
        }



        .numberBox {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .steper {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 100%;
            height: 70rpx;
            margin-left: 20rpx;

            .num-btn {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 34rpx;
              border-radius: 50%;
              width: 60rpx !important;
              height: 60rpx !important;
              line-height: 60rpx;
              font-weight: 600;
              background: rgb(242, 243, 245);
              color: rgb(50, 50, 51);
            }

            .num {
              padding: 0 10rpx;
            }
          }
        }
      }
    }
  }
}

:deep(.u-icon-plus) {
  border-radius: 50%;
  width: 70rpx !important;
  height: 70rpx !important;
  line-height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .num-btn {
    top: 0;
  }
}

:deep(.u-icon-minus) {
  border-radius: 50%;
  width: 70rpx !important;
  height: 70rpx !important;
  line-height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .num-btn {
    top: 0;
  }
}

:deep(.u-number-input) {
  background: transparent !important;
}
</style>
